<!--
 * @Description: 组织机构列表，可模糊搜索，伸缩展示
 * @Date: 2023-11-20 16:13:51
 * @FilePath: \hk-iot\src\components\OrganizationList\index.vue
-->
<template>
  <Transition name="slide-fade">
    <div class="custom-collapse-sidebar" v-if="isShow">
      <div class="list-header">
        <span class="title-text">{{ title }}</span>
      </div>
      <div class="list-search-box energy-from">
        <el-input v-model="keyword" :placeholder="title + '（模糊搜索）'" clearable>
          <template #append>
            <el-button size="small" @click="onOrganListSearch()">
              <el-icon>
                <ele-Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
      </div>

      <el-scrollbar height="100%">
        <div class="maintain-list-box">
          <ul v-if="organList.length">
            <li class="maintain-item" v-for="item in organList" :key="item.id"
              :class="{ isActive: item.id == selectedId }" @click="selectOrganItem(item)">
              {{ item.name }}
            </li>
          </ul>
          <div class="flex col-center row-center" v-else>
            <NoData></NoData>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </Transition>
</template>

<script setup lang="ts" name="organizationList">
import { ref } from 'vue';

interface ListItem {
  id: number | string;
  name: string;
  value: any;
}
defineProps({
  // 列表是否显示：默认显示
  isShow: {
    type: Boolean,
    default: () => true,
  },
  // 列表标题
  title: {
    type: String,
    default: () => '-',
  },
  // 外部传入的组织列表: 默认为数组类型，数组的子项对象至少含有id、name、value字段
  organList: {
    type: Array<ListItem>,
    default: () => [],
  },
});

const keyword = ref(''); // 搜索关键词
const selectedId = ref<number | string>(''); // 选中项的id

const emits = defineEmits(['onOrganListSearch', 'onSelectedOrganItem']);
const onOrganListSearch = () => emits('onOrganListSearch', keyword.value);

// 选中子项
const selectOrganItem = async (item: ListItem) => {
  emits('onSelectedOrganItem', item);
  if (selectedId.value === item.id) {
    // 如果选中的id相等，则取消选中
    selectedId.value = '';
  } else {
    selectedId.value = item.id;
  }
};
</script>

<style lang="scss" scoped>
// 列表动画显示
.slide-fade-enter-active {
  transition: all 0.5s ease-in;
}

.slide-fade-leave-active {
  transition: all 0.5s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.custom-collapse-sidebar {
  width: 300px;
  height: 100%;
  background: rgba(27, 58, 123, 0.54);
  border-radius: 4px;
  padding-bottom: 120px;

  // border: 1px solid var(--el-border-color-light, #ebeef5);
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 10px;
    border-bottom: 1px solid #30539b;

    .title-text {
      color: #d7e4ff;
      font-size: 18px;
    }
  }

  .list-search-box {
    padding: 10px;
  }

  .maintain-list-box {
    padding: 10px;

    .maintain-item:hover {
      background: linear-gradient(88deg, #499afd 0%, #0e45b6 100%) !important;
      color: #fff;
      opacity: 0.6;
    }

    .maintain-item {
      display: flex;
      align-items: center;
      width: 100%;
      list-style: none;
      box-sizing: border-box;
      padding: 10px;
      cursor: pointer;
      font-size: 14px;
      margin-bottom: 10px;
      border-radius: 3px;
      color: #d7e4ff;
      position: relative;
      background-color: #193c86;
    }

    .maintain-item.isActive {
      background: linear-gradient(88deg, #499afd 0%, #0e45b6 100%) !important;
      color: #fff;
    }
  }
}
</style>
